<template>
  <el-dropdown @command="handleCommand">
    <span class="lang-switch">
      <el-icon :size="24"><FaLanguage /></el-icon>
      <span>{{ currentLang }}</span>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item
          v-for="item in languages"
          :key="item.value"
          :command="item.value"
        >
          {{ item.label }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup lang="ts">
  import { useAppStore } from '@/store';
  import { computed } from 'vue';
  import { useI18n } from 'vue-i18n';
  import { FaLanguage } from 'vue-icons-plus/fa';
  const { locale } = useI18n();
  const appStore = useAppStore();

  const languages = [
    { label: '简体中文', value: 'zh-CN' },
    { label: 'English', value: 'en-US' }
  ];

  const currentLang = computed(() => {
    return languages.find((item) => item.value === locale.value)?.label;
  });

  const handleCommand = (command: string) => {
    locale.value = command;
    appStore.setLanguage(command as 'zh-CN' | 'en-US');
  };
</script>

<style scoped lang="scss">
  .lang-switch {
    display: flex;
    align-items: center;
    cursor: pointer;
    outline: none;
    user-select: none;
    width: 86px;
    color: var(--el-text-color-primary) !important;
    .el-icon {
      margin-right: 4px;
      font-size: 16px;
    }
  }
  .lang-switch:hover {
    color: var(--el-color-primary);
  }
</style>
